<template>
<div>
    ref:{{Man}}
</div>
  <div>
    shallowRef:{{Man1}}
  </div>
  <div>customRef:{{Man2}}</div>
  <div ref="dom">我是dom,获取dom对象</div>
  <hr></hr>
  <button @click="change">修改</button>
  <br>
  <button @click="changeTrigger">triggerRef修改</button>
  <br>
  <button @click="changeCustomRef">customRef修改</button>
  <br>
  <button @click="findDom">查询dom元素</button>
</template>

<script setup lang="ts">
/**
 * ref:深响应式
 * isRef:是否为响应式数据
 * shallowRef:浅响应式   {ref和shallowRef不能一块去写,会影响shallowRef造成的试图更新,因为vue内部强制调用了triggerRef()方法强制收集依赖}
 * triggerRef:强制收集依赖
 * customRef:自定义ref
 *
 * reactive:
 * isReactive:
 * shallowReactive:
 *
 * isShallow:
 */
import {ref,isRef,shallowRef,triggerRef,customRef,reactive,isReactive,shallowReactive,isShallow} from "vue";
import type {Ref} from "vue";


//作用写防抖,防止点击按钮出发多次
function myRef<T>(value:T){
  let timmer:any
  return customRef((track, trigger) => {
    return {
      get(){
        track()
        return value
      },
      set(newValue){
        clearTimeout(timmer)
       timmer =  setTimeout(() => {
          value = newValue
          trigger()
         timmer = null
        },500)

      }
    }
  })
}

type M = {
  name:string
}
const Man:Ref<M> = ref({name:'xiaozhou'})
const Man1 = shallowRef({name:'xiaozhou1'})
const Man2 = myRef<string>('xiaoman')
//变量名需要和dom元素的ref一致
const dom = ref<HTMLDivElement>()
const change = () => {
  //深响应式
  Man.value.name = 'zhoulaoban'
  console.log(Man)
  console.log(isRef(Man))
  //浅响应式,只能到value层
  Man1.value = {
    name:'xiaozhou2'
  }
  console.log(Man1)
}
const changeTrigger = () => {
  Man1.value.name = '我被修改了'
  triggerRef(Man1)
  console.log(Man1)
}
const changeCustomRef = () => {
  Man2.value = 'damam'
}
const findDom = () => {
  console.log(dom.value?.innerText)
}
</script>

<style scoped>

</style>